<template>
  <el-form ref="formRef" :model="formModel" :rules="rules" label-width="130px" class="dialog-form" label-position="right" status-icon>
    <el-form-item label="车辆类型:" prop="modelId">
      <query-dict
        :dict-list="carTypeList"
        filterable
        :disabled="isEdit"
        class="select-item"
        placeholder="请选择车辆类型"
        :value.sync="formModel.modelId"
      ></query-dict>
    </el-form-item>
    <el-form-item label="套餐名称:" prop="name">
      <el-input v-model.trim="formModel.name" class="form-item" :disabled="isEdit" placeholder="请输入套餐名称" clearable />
    </el-form-item>
    <el-form-item label="套餐天数:" prop="days">
      <el-input v-model.trim="formModel.days" class="select-item" :disabled="isEdit" placeholder="请输入套餐天数" clearable>
        <template slot="append">天</template>
      </el-input>
    </el-form-item>
    <el-form-item label="套餐原价:" prop="beforeMoney">
      <el-input v-model.trim="formModel.beforeMoney" class="select-item" placeholder="请输入套餐原价" clearable>
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="套餐优惠价:" prop="money">
      <el-input v-model.trim="formModel.money" class="select-item" placeholder="请输入套餐优惠价" clearable>
        <template slot="append">元</template>
      </el-input>
      <span class="input-info">* 套餐优惠价为空时，默认为套餐原价</span>
    </el-form-item>
    <el-form-item label="套餐明细:">
      <div class="list-cell" v-for="(item, index) in formModel.list" :key="index">
        <el-col :span="10">
          <el-input v-model="item.name" placeholder="标题" :disabled="index === 0"></el-input>
        </el-col>
        <el-col :span="10">
          <el-input
            v-model="item.detail"
            :placeholder="index === 0 ? '请输入套餐原价和套餐天数' : '内容'"
            :disabled="index === 0"
            :value="index === 0 ? baseValue : ''"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click.prevent="removeDomain(item, index)" v-if="index > 0">删除</el-button>
        </el-col>
      </div>
    </el-form-item>
    <el-form-item v-if="formModel.list.length">
      <el-button @click="addDomain" icon="el-icon-plus" :size="size">新增明细</el-button>
      <span class="input-info">* 套餐明细主要是给前端展示用</span>
    </el-form-item>
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker
        type="datetime"
        placeholder="请选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :disabled="isEdit"
        v-model="formModel.startTime"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
        type="datetime"
        placeholder="请选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :disabled="isEdit"
        v-model="formModel.endTime"
      ></el-date-picker>
      <span class="input-info">* 无结束时间时，为长期有效</span>
    </el-form-item>
    <el-form-item label="是否启用:" prop="isUse" v-if="!isEdit">
      <query-dict :dict-list="disabledStatus" showType="radio" class="select-item" :value.sync="formModel.isUse"></query-dict>
    </el-form-item>
    <el-form-item label="排序:" prop="sort">
      <el-input-number v-model="formModel.sort" :min="1" :max="100" label="排序"></el-input-number>
    </el-form-item>
    <el-form-item label="描述:">
      <el-input
        type="textarea"
        :rows="4"
        maxlength="100"
        show-word-limitv-model.trim="formModel.describe"
        class="form-item"
        v-model="formModel.describe"
        placeholder="请输入描述"
        clearable
      />
    </el-form-item>
  </el-form>
</template>

<script>
import utils from 'utils'
import mixinTable from 'mixins/table'
import MixinForm from 'mixins/form'
import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm, mixinTable],
  props: {
    initData: {
      type: Object,
      default() {
        return {
          isUse: 1,
          isWeek: 0,
          list: [
            {
              name: '基础费用',
              detail: ''
            }
          ],
          deleteIds: [] // 删除id集合
        }
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      carTypeList: [], // 车辆类型
      cityList: [], // 城市列表
      initCityCode: '',
      pickerOptions: utils.pickerOptions,
      disabledStatus: dictObj.disabledStatus,
      rules: {
        name: [{ required: true, message: '计费策略名称不能为空', trigger: 'blur' }],
        days: [{ required: true, message: '套餐天数不能为空', trigger: 'blur' }],
        modelId: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
        beforeMoney: [{ required: true, message: '套餐原价不能为空', trigger: 'blur' }],
        isUse: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }]
      }
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    },
    baseValue() {
      const { beforeMoney, days } = this.formModel
      if (days && beforeMoney) {
        return beforeMoney / days + '*' + days + '=' + parseFloat(beforeMoney).toFixed(2) + '元'
      }
      return ''
    }
  },
  watch: {
    baseValue(newVal) {
      this.formModel.list[0].detail = newVal
    }
  },
  created() {
    const { cityCode, cityName } = utils.getStore('cityInfo')
    const cityList = utils.getStore('cityList')
    if (cityCode === '00') {
      this.initCityCode = '00'
      this.cityList = this.$store.getters.allCity.length ? this.$store.getters.allCity : cityList
    } else {
      this.cityList = [
        {
          label: cityName,
          value: cityCode
        }
      ]
      this.formModel.cityCode = cityCode
      this.initCityCode = '11'
    }
    this.getCarType()
  },
  methods: {
    getCarType() {
      this.$api.vehicle
        .fetch('carTypeList', {
          rows: 1,
          offset: 999
        })
        .then(res => {
          const carTypeList = res.data.map(val => ({ label: val.modelId, value: val.id }))
          this.carTypeList = carTypeList
        })
    },
    addDomain() {
      this.formModel.list.push({
        name: '',
        detail: ''
      })
    },
    removeDomain(item, index) {
      this.formModel.list.splice(index, 1)
      if (item.id) {
        if (!this.formModel.deleteIds) {
          this.formModel.deleteIds = []
        }
        this.formModel.deleteIds.push(item.id)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.list-cell {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  line-height: 50px;
  &:last-child {
    margin-bottom: 0px;
  }
}
</style>
